<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
<!--z
在模板中给组件插槽name属性
当你使用 组件的时候，要插入插槽就可以给要插入的标签填入 slot=""  并赋值具体的槽位名称

如果在vue实例里面往一个组件里面插入多个插槽，如果你在父组件里面不对插槽位置进行修改，
页面渲染 默认是按 子模板那样渲染

-->



	<body>
		<div id="app">
			<cpn></cpn>
			<hr>
			<cpn><button>按钮</button><span>abc</span></cpn>
			<hr>
			<cpn><i slot="left">替换左边</i>其他</cpn>
		</div>

		<!--子组件模板-->
		<template id="cpn">
			<div>
				<div>我是子组件</div>
				<slot name="left"><span>左边</span></slot>
				<slot name="center"><span>中间</span></slot>
				<slot name="right"><span>右边</span></slot>
				<slot></slot>
				<slot></slot>				
			</div>
		</template>
		

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				components:{
					cpn:{
						template:"#cpn",
						
					}
				}
			});
		</script>
	</body>
</html>
